<script setup>
import {ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import {ElLoading, ElMessage} from "element-plus";
import { Select } from '@element-plus/icons-vue'
import {http} from "@/api";
const apiKey = 'question'
const router = useRouter()
const route = useRoute()
const id = route.params.id
const formData = ref({
  id: undefined,
  "name": "",
  sort: 0,
  questionOptions: []
})
const rules = ref({
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
})


const formRef =  ref(null)
if (id) {
  // 获取详情
  http[apiKey].read(id).then(res => {
    for (const valueKey in formData.value) {
      formData.value[valueKey] = res.data[valueKey]
    }
    formData.value.id = id
  })
}
const cancel = () => {
  router.back()
}
const confirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const loadingInstance = ElLoading.service()
      if (id) {
        // 编辑
        http[apiKey].update({
          ...formData.value,
          id
        }).then(res => {
          ElMessage.success('编辑成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      } else {
        // 新增
        http[apiKey].create(formData.value).then(res => {
          ElMessage.success('新增成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
function deleteOption(item,index) {
  if (item.id) {
    http.questionOption.del(item.id).then(() => {
      formData.value.questionOptions.splice(index,1)
    })
  } else {
    formData.value.questionOptions.splice(index,1)
  }
}
function editOption(item) {
  formData2.value = item
  dialogValue.value = true
}
const dialogValue = ref(false)
function addOption() {
  formData2.value = {
    value_key: '',
    value: '',
    is_correct: 0
  }
  if (formData.value.id) {
    dialogValue.value = true
  } else {
    formRef.value.validate((valid) => {
      if (valid) {
        const loadingInstance = ElLoading.service()
        // 新增
        http[apiKey].create(formData.value).then(res => {
          formData.value.id = res.data.id
          dialogValue.value = true
        }).finally(() => {
          loadingInstance.close()
        })
      } else {
        console.log('error submit!!')
        return false
      }
    })
  }
}
const formData2 = ref({
  value_key: '',
  value: '',
  is_correct: 0
})
const formData2Ref = ref(null)
const formRules2 = ref({
  value_key: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  value: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  is_correct: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
})
const confirmOption = () => {
  formData2Ref.value.validate((valid) => {
    if (valid) {
      if (formData2.value.id) {
        http.questionOption.update({
          ...formData2.value,
          question_id: formData.value.id
        }).then(() => {
          dialogValue.value = false
          // 获取详情
          http[apiKey].read(formData.value.id).then(res => {
            for (const valueKey in formData.value) {
              formData.value[valueKey] = res.data[valueKey]
            }
          })
        })
      } else {
        http.questionOption.create({
          ...formData2.value,
          question_id: formData.value.id
        }).then(() => {
          dialogValue.value = false
          // 获取详情
          http[apiKey].read(formData.value.id).then(res => {
            for (const valueKey in formData.value) {
              formData.value[valueKey] = res.data[valueKey]
            }
          })
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
</script>

<template>
  <el-dialog v-model="dialogValue" title="选项">
    <el-form label-position="top" :model="formData2" ref="formData2Ref" :rules="formRules2">
      <el-form-item label="序号">
        <el-input v-model="formData2.value_key" placeholder="如：A、B"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="formData2.value"></el-input>
      </el-form-item>
      <el-form-item label="是否正确">
        <el-select v-model="formData2.is_correct" placeholder="是否正确答案">
          <el-option :value="1" label="是"></el-option>
          <el-option :value="0" label="否"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="confirmOption">确认</el-button>
        <el-button @click="dialogValue = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <PageMain :title="id ? '编辑' :'新增'">
    <div class="form-content f-c j-b">
      <div class="form-box form-box2">
        <el-form ref="formRef" style="width: 660px" :model="formData" :rules="rules" label-position="top" >
         <el-row :gutter="20">
           <el-col :span="24">
             <el-form-item label="名称" prop="name">
               <el-input clearable v-model="formData.name"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="排序" prop="sort">
               <el-input clearable v-model="formData.sort"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="24" v-for="(item,index) in formData.questionOptions" :key="item.value_key">
             <div class="f-r a-c" style="margin-bottom: 10px">
               <span style="width: 30px">
                 <el-icon v-if="item.is_correct"><Select /></el-icon>
               </span>
               <span style="width: 100px"> 选项 {{ index + 1}}：</span>
               <span style="min-width: 260px"> {{ item.value_key }}-{{ item.value }}</span>
               <div style="margin-left: 10px">
                 <el-button size="mini" type="text" @click="editOption(item,index)">编辑</el-button>
                 <el-button size="mini" type="text" @click="deleteOption(item,index)">删除</el-button>
               </div>
             </div>
           </el-col>
            <el-col :span="24">
              <el-button type="text" @click="addOption">添加选项</el-button>
            </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="form-button f-s">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </PageMain>
</template>
<style lang="scss">
.form-box2 {
  display: flex;
  .gap {
    width: 32px;
  }
  .avatar-uploader {
    width: 100%;
  }
  .avatar-uploader .avatar {
    width: 100%;
    height: 120px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  .el-upload {
    width: 100%;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 120px;
    text-align: center;
  }
}
</style>
